<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的课表</title>
<style>
	body {
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		background: #f5f7fa;
		padding: 20px;
		min-height: 100vh;
		margin: 0;
	}
	
	h3 {
		text-align: center;
		color: #333;
		margin: 20px 0;
	}
	
	.controls {
		text-align: center;
		margin: 10px 0;
		padding: 15px;
		background: white;
		border-radius: 10px;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	}
	
	.control-group {
		display: inline-block;
		margin: 0 15px;
	}
	
	.control-label {
		font-weight: bold;
		margin-right: 5px;
	}
	
	.control-select {
		padding: 5px;
		border-radius: 3px;
		border: 1px solid #ccc;
	}
	
	.control-btn {
		padding: 10px 20px;
		background: linear-gradient(135deg, #667eea, #764ba2);
		color: white;
		text-decoration: none;
		border-radius: 8px;
		margin: 0 5px;
		border: none;
		cursor: pointer;
		font-weight: 600;
		transition: all 0.3s ease;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	}
	
	.control-btn.active {
		background: linear-gradient(135deg, #764ba2, #667eea);
		font-weight: bold;
	}
	
	.control-btn:hover {
		background: linear-gradient(135deg, #764ba2, #667eea);
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	}
	
	.schedule-container {
		width: 95%;
		margin: 20px auto;
		background: white;
		border-radius: 15px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
		overflow: auto;
	}
	
	.schedule-table {
		width: 100%;
		border-collapse: collapse;
		table-layout: fixed;
	}
	
	.schedule-table th, .schedule-table td {
		border: 1px solid #000;
		text-align: center;
		vertical-align: top;
		padding: 5px;
	}
	
	.schedule-table th {
		background: linear-gradient(135deg, #667eea, #764ba2);
		color: white;
		height: 40px;
		font-weight: bold;
	}
	
	.schedule-table .time-column {
		width: 80px;
		background: linear-gradient(135deg, #667eea, #764ba2);
		color: white;
		font-weight: bold;
	}
	
	.schedule-table .day-header {
		background: linear-gradient(135deg, #667eea, #764ba2);
		color: white;
		font-weight: bold;
	}
	
	.course-cell {
		position: relative;
		min-height: 80px;
	}
	
	.course-info {
		padding: 5px;
	}
	
	.course-name {
		font-weight: bold;
		color: #2E7D32;
		font-size: 12px;
	}
	
	.instructor {
		font-size: 11px;
		color: #666;
	}
	
	.location {
		font-size: 11px;
		color: #666;
	}
	
	.time-slot {
		font-size: 10px;
		color: #888;
	}
	
	.no-course {
		color: #999;
		font-style: italic;
		height: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.nav-links {
		text-align: center;
		margin: 20px;
	}
	
	.nav-link {
		display: inline-block;
		padding: 12px 25px;
		background: linear-gradient(135deg, #667eea, #764ba2);
		color: white;
		text-decoration: none;
		border-radius: 8px;
		margin: 0 10px;
		font-weight: 600;
		transition: all 0.3s ease;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	}
	
	.nav-link:hover {
		background: linear-gradient(135deg, #764ba2, #667eea);
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	}
	
	.back-btn {
		display: block;
		text-align: center;
		margin-top: 25px;
	}

	.back-btn {
		display: block;
		text-align: center;
		margin-top: 30px;
	}

	.back-btn a {
		display: inline-block;
		padding: 12px 25px;
		background: linear-gradient(135deg, #95a5a6, #7f8c8d);
		color: white;
		border-radius: 8px;
		text-decoration: none;
		transition: all 0.3s ease;
		font-weight: 600;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	}

	.back-btn a:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
		text-decoration: none;
		color: white;
	}
</style>
</head>
<body>
	<h3>我的课表</h3>
	
	<div class="controls">
		<form action="${pageContext.request.contextPath}/Schedule_Servlet" method="get" style="display: inline;">
			<input type="hidden" name="id" value="seekall">
			<div class="control-group">
				<span class="control-label">学期:</span>
				<select name="semester" class="control-select">
					<option value="2025-2026秋季学期" <c:if test='${empty param.semester || param.semester == "2025-2026秋季学期"}'>selected</c:if>>2025-2026秋季学期</option>
					<option value="2024-2025春季学期" <c:if test='${param.semester == "2024-2025春季学期"}'>selected</c:if>>2024-2025春季学期</option>
					<option value="2024-2025夏季学期" <c:if test='${param.semester == "2024-2025夏季学期"}'>selected</c:if>>2024-2025夏季学期</option>
				</select>
			</div>
			
			<div class="control-group">
				<span class="control-label">校区:</span>
				<select name="campus" class="control-select">
					<option value="">全部校区</option>
					<option value="校区1" <c:if test='${param.campus == "校区1"}'>selected</c:if>>校区1</option>
					<option value="校区2" <c:if test='${param.campus == "校区2"}'>selected</c:if>>校区2</option>
				</select>
			</div>
			
			<input type="submit" value="筛选" class="control-btn">
		</form>
	</div>
	
	<div class="nav-links">
		<a href="${pageContext.request.contextPath}/MyCourse_Servlet?id=seekall&campus=${param.campus}&semester=${param.semester}" class="nav-link">列表视图</a>
		<a href="${pageContext.request.contextPath}/Schedule_Servlet?id=seekall&campus=${param.campus}&semester=${param.semester}" class="nav-link">课表视图</a>
	</div>
	
	<div class="schedule-container">
		<table class="schedule-table">
			<thead>
				<tr>
					<th class="time-column">节次/周次</th>
					<th class="day-header">星期一</th>
					<th class="day-header">星期二</th>
					<th class="day-header">星期三</th>
					<th class="day-header">星期四</th>
					<th class="day-header">星期五</th>
					<th class="day-header">星期六</th>
					<th class="day-header">星期日</th>
				</tr>
			</thead>
			<tbody>
				<!-- 生成 12 节课的时间表 -->
				<c:forEach var="i" begin="1" end="12">
					<tr>
						<td class="time-column">
							第${i}节<br>
							<c:choose>
								<c:when test="${i == 1}"><span class="time-slot">08:00-08:45</span></c:when>
								<c:when test="${i == 2}"><span class="time-slot">08:55-09:40</span></c:when>
								<c:when test="${i == 3}"><span class="time-slot">10:00-10:45</span></c:when>
								<c:when test="${i == 4}"><span class="time-slot">10:55-11:40</span></c:when>
								<c:when test="${i == 5}"><span class="time-slot">14:00-14:45</span></c:when>
								<c:when test="${i == 6}"><span class="time-slot">14:55-15:40</span></c:when>
								<c:when test="${i == 7}"><span class="time-slot">16:00-16:45</span></c:when>
								<c:when test="${i == 8}"><span class="time-slot">16:55-17:40</span></c:when>
								<c:when test="${i == 9}"><span class="time-slot">19:00-19:45</span></c:when>
								<c:when test="${i == 10}"><span class="time-slot">19:55-20:40</span></c:when>
								<c:when test="${i == 11}"><span class="time-slot">20:50-21:35</span></c:when>
								<c:when test="${i == 12}"><span class="time-slot">21:45-22:30</span></c:when>
							</c:choose>
						</td>
			
						<!-- 周一到周日 -->
						<c:forEach var="j" begin="1" end="7">
							<td class="course-cell">
								<div class="course-info">
									<c:forEach var="schedule" items="${courseSchedules}">
										<c:if test="${schedule.dayOfWeek == j && schedule.startSession <= i && schedule.endSession >= i}">
											<div class="course-name">${schedule.courseName}</div>
											<div class="instructor">${schedule.teacher}</div>
											<div class="location">${schedule.place}</div>
										</c:if>
									</c:forEach>
								</div>
							</td>
						</c:forEach>
					</tr>
				</c:forEach>
			</tbody>
		</table>
	</div>
	
	<div class="back-btn">
		<a href="javascript:history.back()"><i class="fas fa-arrow-left"></i> 返回</a>
	</div>
</body>
</html>